<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Not Found - 404</title>
    <link rel="stylesheet" href="/static/assets/404/css/all.min.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        min-height: 100vh;
        background: linear-gradient(135deg, #e6f7ee, #f0f8ff);
        color: #2c3e50;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
      }

      body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(
            circle at 15% 20%,
            rgba(147, 224, 191, 0.3) 0%,
            transparent 30%
          ),
          radial-gradient(
            circle at 85% 25%,
            rgba(179, 207, 245, 0.3) 0%,
            transparent 25%
          ),
          radial-gradient(
            circle at 70% 80%,
            rgba(255, 209, 148, 0.3) 0%,
            transparent 30%
          ),
          radial-gradient(
            circle at 30% 75%,
            rgba(253, 184, 215, 0.3) 0%,
            transparent 35%
          );
        z-index: -1;
      }

      .content {
        max-width: 800px;
        padding: 2rem;
        text-align: center;
        position: relative;
        z-index: 2;
      }

      .error-code {
        font-size: 8rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        line-height: 1;
        color: transparent;
        background: linear-gradient(120deg, #2c3e50, #27ae60);
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        position: relative;
        display: inline-block;
        transform-origin: center;
      }

      .error-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
        position: relative;
        color: #2c3e50;
      }

      .error-title::after {
        content: "";
        display: block;
        width: 120px;
        height: 3px;
        background: linear-gradient(
          to right,
          transparent,
          #27ae60,
          transparent
        );
        margin: 15px auto;
        border-radius: 3px;
        position: relative;
        z-index: 1;
      }

      .error-message {
        font-size: 1.2rem;
        max-width: 500px;
        margin: 0 auto 2.5rem;
        line-height: 1.7;
        color: #34495e;
        position: relative;
        z-index: 2;
      }

      .leaf-container {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 0 auto 2rem;
      }

      .leaf {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 6rem;
        color: #27ae60;
        animation: sway 8s infinite ease-in-out;
        opacity: 0.3;
        z-index: 1;
      }

      .leaf:nth-child(1) {
        animation-delay: -1s;
        transform: rotate(30deg) translateY(-15px);
        filter: blur(1px);
      }

      .leaf:nth-child(2) {
        animation-delay: -3s;
        transform: rotate(-20deg) translateY(10px);
        filter: blur(2px);
        color: #2980b9;
        opacity: 0.25;
      }

      .buttons {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1rem;
        position: relative;
        z-index: 3;
      }

      .btn {
        padding: 0.9rem 2.5rem;
        border-radius: 40px;
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        outline: none;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-width: 180px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }

      .btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        transition: transform 0.5s ease;
        transform: scaleX(0);
        transform-origin: right;
      }

      .btn-home {
        background: linear-gradient(120deg, #27ae60, #2ecc71);
        color: white;
        box-shadow: 0 8px 25px rgba(46, 204, 113, 0.25);
      }

      .btn-home:before {
        background: linear-gradient(120deg, #2ecc71, #27ae60);
      }

      .btn-back {
        background: transparent;
        color: #2c3e50;
        border: 2px solid #27ae60;
      }

      .btn-back:before {
        background: #27ae60;
      }

      .btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(52, 152, 219, 0.2);
      }

      .btn:hover:before {
        transform: scaleX(1);
        transform-origin: left;
      }

      .btn-home:hover {
        color: white;
      }

      .btn-back:hover {
        color: white;
        border-color: #27ae60;
      }

      @keyframes sway {
        0%,
        100% {
          transform: rotate(0) translateY(0);
          opacity: 0.25;
        }
        25% {
          transform: rotate(5deg) translateY(-10px);
          opacity: 0.3;
        }
        50% {
          transform: rotate(-5deg) translateY(5px);
          opacity: 0.2;
        }
        75% {
          transform: rotate(3deg) translateY(-5px);
          opacity: 0.35;
        }
      }

      @media (max-width: 768px) {
        .content {
          padding: 2rem 1.5rem;
        }

        .error-code {
          font-size: 6rem;
        }

        .error-title {
          font-size: 1.8rem;
        }

        .error-message {
          font-size: 1.05rem;
          margin-bottom: 2rem;
        }

        .buttons {
          flex-direction: column;
          gap: 1rem;
        }

        .btn {
          width: 100%;
          max-width: 300px;
        }

        .leaf-container {
          width: 130px;
          height: 130px;
        }

        .leaf {
          font-size: 5rem;
        }
      }

      @media (max-width: 480px) {
        .error-code {
          font-size: 5rem;
        }

        .error-title {
          font-size: 1.6rem;
        }

        .error-message {
          font-size: 1rem;
          margin-bottom: 1.8rem;
        }

        .leaf-container {
          width: 110px;
          height: 110px;
          margin-bottom: 1.5rem;
        }

        .leaf {
          font-size: 4.5rem;
        }
      }

      .footer-text {
        margin-top: 2.5rem;
        font-size: 0.9rem;
        color: #7f8c8d;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="error-code">404</div>
      <h1 class="error-title">Page Lost in Nature</h1>
      <p class="error-message">
        The path you were seeking seems to have wandered off into the woods.
        Maybe you took a wrong trail, or the page was moved elsewhere.
      </p>

      <div class="leaf-container">
        <div class="leaf">
          <i class="fas fa-leaf"></i>
        </div>
        <div class="leaf">
          <i class="fas fa-leaf"></i>
        </div>
      </div>

      <div class="buttons">
        <a href="/" class="btn btn-home">
          <i class="fas fa-home"></i> Back to Home
        </a>
      </div>
    </div>

    <script>
      // Create floating background elements
      document.addEventListener("DOMContentLoaded", function () {
        const body = document.querySelector("body");
        const elementsCount = 10;

        for (let i = 0; i < elementsCount; i++) {
          const natureElement = document.createElement("div");
          natureElement.className = "nature-element";

          // Use nature-related icons
          const icons = ["seedling", "feather", "water", "mountain", "cloud"];
          const icon = icons[Math.floor(Math.random() * icons.length)];

          natureElement.innerHTML = `<i class="fas fa-${icon}"></i>`;

          // Random size
          const size = Math.random() * 40 + 20;

          // Random position
          const left = Math.random() * 100;
          const top = Math.random() * 100;

          // Random rotation
          const rotation = Math.random() * 360;

          // Random animation
          const duration = Math.random() * 10 + 15;
          const delay = Math.random() * 5;

          // Set styles
          natureElement.style.position = "fixed";
          natureElement.style.fontSize = `${size}px`;
          natureElement.style.color = `rgba(${Math.random() * 100}, ${
            Math.random() * 100 + 100
          }, ${Math.random() * 50 + 50}, ${Math.random() * 0.2 + 0.1})`;
          natureElement.style.left = `${left}%`;
          natureElement.style.top = `${top}%`;
          natureElement.style.zIndex = "0";
          natureElement.style.transform = `rotate(${rotation}deg)`;
          natureElement.style.pointerEvents = "none";
          natureElement.style.animation = `floatNature ${duration}s ${delay}s infinite ease-in-out`;

          body.appendChild(natureElement);
        }
      });
    </script>

    <style>
      @keyframes floatNature {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        25% {
          transform: translate(calc(100vw / 50), calc(-100vh / 30))
            rotate(10deg);
        }
        50% {
          transform: translate(calc(-100vw / 40), calc(100vh / 40))
            rotate(-10deg);
        }
        75% {
          transform: translate(calc(100vw / 60), calc(100vh / 50)) rotate(5deg);
        }
      }

      .nature-element {
        animation-duration: 20s;
        animation-iteration-count: infinite;
      }
    </style>
  </body>
</html>
